<template>
  <div :class="$style.wrap">
    <ContentWrap>
      <FormContainer :cloumn="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="projectName" label="项目名称">
            <el-input v-model="formData.projectName" placeholder="请输入项目名称"></el-input>
          </el-form-item>
          <el-form-item prop="isEnableAppeal" label="是否能申诉">
            <el-select v-model="formData.isEnableAppeal" placeholder="请选择" clearable filterable>
              <el-option v-for="(s,i) in isEnableAppealList" :key="i" :value="s.dictCode" :label="s.dictName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="isEnable" label="项目状态">
            <el-select v-model="formData.isEnable" placeholder="请选择" clearable filterable>
              <el-option v-for="(s,i) in isEnableList" :key="i" :value="s.dictCode" :label="s.dictName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="questionnaireId" label="质检评分表">
            <QuestionnaireSelect v-model="formData.questionnaireId"></QuestionnaireSelect>
          </el-form-item>
          <el-form-item prop="state" label="发布状态">
            <el-select v-model="formData.state" placeholder="请选择" clearable filterable>
              <el-option v-for="(s,i) in releaseStateList" :key="i" :value="s.dictCode" :label="s.dictName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="executorBusinessGroupNo" label="质检业务组">
            <SearchSelectPicker
              url="/call-center/api/v1/businessGroup/page"
              placeholder="请选择质检业务组"
              lable-name="groupName"
              value-name="groupNo"
              :value.sync="formData.executorBusinessGroupNo"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="litigantBusinessGroupNo" label="受检业务组">
            <SearchSelectPicker
              url="/call-center/api/v1/businessGroup/page"
              placeholder="请选择受检业务组"
              lable-name="groupName"
              value-name="groupNo"
              :value.sync="formData.litigantBusinessGroupNo"
            ></SearchSelectPicker>
            <!-- :cur-options.sync="groupOption" -->
          </el-form-item>
          <el-form-item prop="cycle" label="执行周期">
            <el-date-picker v-model="formData.cycle" opt operator="<" :limite="new Date()" type="daterange" format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="-" clearable></el-date-picker>
          </el-form-item>
          <el-form-item prop="createTime" label="创建时间">
            <el-date-picker v-model="formData.createTime" opt operator=">" :limite="new Date()" type="daterange" format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="-" clearable></el-date-picker>
          </el-form-item>
          <el-form-item>
            <div class="button-container" style="padding-top:0">
              <Button type="primary" enter @click="queryHandle">查询</Button>
              <Button type="primary" @click="resetForm">重置</Button>
            </div>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div class="button-container" style="padding-top:0">
        <Button type="primary" @click="addHandle">新增</Button>
        <Button type="primary" @click="editHandle">编辑</Button>
        <Button type="primary" @click="releaseHandle">发布</Button>
        <Button type="primary" @click="closeHandle">关闭</Button>
        <ExportPane :table-config="tableConfig" :data-source="selectionList" :other-raw="otherRaw" :query-data-fun="queryHandle" filename="质检项目管理">导出</ExportPane>
      </div>
      <table-box ref="table" no-request :table-config="tableConfig" :other-filters="otherFilters" :other-raw="otherRaw" :selected-arry.sync="selectionList" @selection-change="selectionChangeHandle">
        <el-table-column slot="before" type="index" align="center" label="序号" width="50"></el-table-column>
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import ExportPane from '@/components/ExportPane'
import QuestionnaireSelect from './components/questionnaireSelect'
// import { getBusinessAll } from '@/api/business'
import { deepCopy, parseTime } from '@/utils'
import { qualityCheckProjectClose, qualityCheckProjectRelease } from '@/api/inspection'
export default {
  name: 'ItemManage',
  components: {
    ContentWrap,
    FormContainer,
    SearchSelectPicker,
    ExportPane,
    QuestionnaireSelect
  },
  data() {
    return {
      formData: {
        projectName: '',
        isEnableAppeal: null,
        isEnable: null,
        questionnaireId: '',
        state: null,
        executorBusinessGroupNo: '',
        litigantBusinessGroupNo: '',
        cycle: [],
        createTime: []
      },
      formRules: {
      },
      // 业务组
      // groupList: [],
      isEnableAppealList: [
        { dictCode: '1', dictName: '能' },
        { dictCode: '0', dictName: '不能' }
      ],
      isEnableList: [
        { dictCode: '', dictName: '全部' },
        { dictCode: '1', dictName: '启用' },
        { dictCode: '0', dictName: '停用' }
      ],
      releaseStateList: [
        { dictCode: '', dictName: '全部' },
        { dictCode: '2', dictName: '已发布' },
        { dictCode: '1', dictName: '未发布' }
      ],
      // 列表
      tableConfig: {
        interfacePath: '/call-center/api/v1/qualityCheckProject/page',
        hideFuncBar: true,
        sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'projectName',
            label: '项目名称',
            minWidth: 120
          },
          {
            prop: 'state',
            label: '发布状态',
            minWidth: 120,
            formatData: v => {
              return this.getStateName(v.state, this.releaseStateList)
            }
          },
          {
            prop: 'isEnableAppeal',
            label: '能否申诉',
            minWidth: 120,
            formatData: v => {
              return this.getStateName(v.isEnableAppeal, this.isEnableAppealList)
            }
          },
          {
            prop: 'isEnable',
            label: '项目状态',
            minWidth: 120,
            formatData: v => {
              return this.getStateName(v.isEnable, this.isEnableList)
            }
          },
          {
            prop: 'executorBusinessGroupName',
            label: '质检业务组',
            minWidth: 120
          },
          {
            prop: 'litigantBusinessGroupName',
            label: '受检业务组',
            minWidth: 120
          },
          {
            prop: 'endDate',
            label: '截止完成时间',
            minWidth: 140
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: 120,
            formatData: v => {
              return `${v.createByName}(${v.createBy})`
            }
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 140
          }
        ]
      },
      otherFilters: [],
      otherRaw: {},
      selectionList: []
    }
  },
  created() {
    // this.getGroupList()
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (from.name === 'AddEditItem') {
        vm.refreshTable('onPage')
      }
    })
  },
  methods: {
    // 获取业务组
    // getGroupList() {
    //   getBusinessAll().then(res => {
    //     this.groupList = res.data
    //   })
    // },
    // 查询
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const data = deepCopy(this.formData)
        if (data.cycle && data.cycle.length === 2) {
          data.beginDate = parseTime(data.cycle[0], '{y}-{m}-{d}')
          data.endDate = parseTime(data.cycle[1], '{y}-{m}-{d}')
        }
        delete data.cycle
        // if (data.createTime.length === 2) {
        //   data.workOrderCreateDateBegin = parseTime(data.createTime[0], '{y}-{m}-{d}')
        //   data.workOrderCreateDateEnd = parseTime(data.createTime[1], '{y}-{m}-{d}')
        // }
        // delete data.createTime

        // 处理业务组
        // , 'executorBusinessGroupNo', 'litigantBusinessGroupNo'
        data.executorBusinessGroupNo ? data.executorBusinessGroupNo = data.executorBusinessGroupNo + ',' : ''
        data.litigantBusinessGroupNo ? data.litigantBusinessGroupNo = data.litigantBusinessGroupNo + ',' : ''
        const eq = this.$genRule('=', ['isEnableAppeal', 'state', 'isEnable'])
        const beginDate = this.$genRule('>=', ['beginDate'])
        const endDate = this.$genRule('<=', ['endDate'])
        const otherFilters = this.$genOtherFilters(data, eq, beginDate, endDate)
        this.otherFilters = otherFilters
        if (type !== 'export') {
          this.refreshTable(type)
        }
        return otherFilters
      })
    },
    // 获取状态名称
    getStateName(dictCode, list) {
      return this.$getNameByDataDict(dictCode, list)
    },
    // 获取业务组名称
    // getGroupName(groupNo) {
    //   for (const g of this.groupList) {
    //     if (g.groupNo === groupNo) {
    //       return g.groupName
    //     }
    //   }
    //   return groupNo
    // },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields()
    },
    // 刷新列表
    refreshTable(type) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(type)
      })
    },
    selectionChangeHandle(v) {
      this.selectionList = v
    },
    // 新增
    addHandle() {
      this.$router.push({ name: 'AddEditItem' })
    },
    // 编辑
    editHandle() {
      return this.$checkSelected(this.selectionList).then(() => {
        const d = this.selectionList[0]
        if (![1, '1'].includes(d.isEnable)) {
          return this.$message.warning('只能编辑启用的任务！')
        }
        if ([2, '2'].includes(d.state)) {
          return this.$message.warning('不能编辑已发布的任务！')
        }
        this.$router.push({ name: 'AddEditItem', params: { id: d.id }, query: { title: '编辑质检项目' }})
      })
    },
    // 发布
    releaseHandle() {
      return this.$checkSelected(this.selectionList).then(() => {
        const d = this.selectionList[0]
        if ([2, '2'].includes(d.state)) {
          return this.$message.error('任务已经发布！')
        }
        return this.$msgbox({
          title: '提示',
          message: '确认发布？',
          showCancelButton: true,
          type: 'warning'
        }).then(() => {
          return qualityCheckProjectRelease(d.id).then(res => {
            this.$message.success('发布成功！')
            this.refreshTable('onPage')
          })
        })
      })
    },
    // 关闭
    closeHandle() {
      return this.$checkSelected(this.selectionList).then(() => {
        return this.$msgbox({
          title: '提示',
          message: '确认关闭？',
          showCancelButton: true,
          type: 'warning'
        }).then(() => {
          return qualityCheckProjectClose(this.selectionList[0].id).then(res => {
            this.$message.success('关闭成功！')
            this.refreshTable('onPage')
          })
        })
      })
    }
  }
}
</script>
<style lang='scss' module>
.warp{

}
</style>
